@font-face {
    font-family: mono-regular;
    src: url("/fonts/JetBrainsMono-Regular.woff2");
}

@font-face {
    font-family: mono-italic;
    src: url("/fonts/JetBrainsMono-Italic.woff2");
}

@font-face {
    font-family: mono-medium;
    src: url("/fonts/JetBrainsMono-Medium.woff2");
}

@font-face {
    font-family: mono-medium-italic;
    src: url("/fonts/JetBrainsMono-MediumItalic.woff2");
}

@font-face {
    font-family: mono-bold;
    src: url("/fonts/JetBrainsMono-Bold.woff2");
}

h1 {
    font-family: "HarmonyOS Sans", sans-serif;
}

h2 {
    font-family: sans-serif;
    font-weight: normal;
}

h5 {
    font-family: mono-bold, Consolas, monospace;
    font-weight: normal;
    color: #42B983;
}

body::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0;
    font-family: sans-serif;
    font-weight: normal;
    text-align: center;
    horiz-align: center;
    letter-spacing: 0.4pt;
    transition: all 300ms;
    line-height: 1.6em;
}

#whole {
    margin-top: 10%;
}

#background {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: mono-italic, monospace;
    font-size: 20em;
    color: gray;
    opacity: 10%;
}

#title {
    font-family: mono-medium, sans-serif;
}

div {
    font-family: mono-medium, serif;
    position: relative;
    color: #5760a2;
    font-size: 1em;
}

div img {
    height: 7em;
}

hr {
    margin-top: 3em;
    margin-bottom: 3em;
    border: 0.5pt solid #646464;
    opacity: 20%;
}

button {
    font-family: mono-medium, sans-serif;
    letter-spacing: 1.25pt;
    color: rgb(196, 196, 196);
    background-color: #FFFFFF00;
    border: 0 solid #5760a2;
    border-radius: 12px;
    padding: 1em;
    font-size: 1.1em;
    margin: 0.5em;
    transition: all 300ms;
}

.doc:hover {
    color: #5760a2;
    box-shadow: #5760a2 0 2.5pt 0;
}

.ad:hover {
    color: white;
    background-color: #42B983;
    box-shadow: rgba(66, 185, 131, 0.3) 0 5.5pt 0;
}

button span:before, button span:after {
    opacity: 0.15;
    transition: all 300ms;
}

.doc span:before {
    content: "《 ";
}

.doc span:after {
    content: " 》";
}

.doc:hover span:before, .doc:hover span:after {
    opacity: 1;
}

.ad span:before {
    content: "< ";
    font-weight: bolder;
}

.ad span:after {
    content: " >";
    font-weight: bolder;
}

.ad:hover span:before, .ad:hover span:after {
    opacity: 1;
}

a:link, a:visited, a:hover, a:active {
    color: #5760a2;
    /*margin: 1em;*/
}

code {
    letter-spacing: 0;
    color: black;
    font-family: "JetBrains Mono", mono-medium, Consolas, monospace;
}

div code {
    padding: 0.15em;
    color: #42B983;
}

div > div {
    font-size: 0.9em;
    font-weight: normal;
    padding: 0.15em;
}

#readme {
    margin-left: 25%;
    margin-right: 25%;
    text-align: left;
}

#readme img {
    width: 100%;
    height: 100%;
}

blockquote {
    background: #6464640C;
    font-family: sans-serif;
    margin: 0;
    padding: 1em;
    border-radius: 5.5pt;
    border-left: #5760a2 solid 5pt;
}

blockquote > p {
    margin: 0 5pt;
}

#nav {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    padding: 1vw 0;
    background: #5760a2;
    overflow: hidden;
    animation: nav 1s cubic-bezier(0.4, 0, 0.2, 1);
}

#nav > a {
    text-decoration: none;
    color: white;
    font-family: "HarmonyOS Sans", sans-serif;
    font-size: 1.2vw;
    letter-spacing: 0.5vmax;
    font-weight: lighter;
    transition: all 200ms;
    animation: notification 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#nav > a:hover {
    filter: drop-shadow(0 0 5px #FFFFFF44);
}

@keyframes nav {
    from {
        top: -4.5vmax;
    }
    to {
        top: 0;
    }
}

@keyframes notification {
    from {
        filter: blur(15pt);
    }
    to {
        filter: none;
    }
}